<template>
    <div class="panel admin-panel">
        <div>&nbsp;
            &nbsp;项目:<el-input v-model="workOrder.projectId.no" placeholder="项目编号" size="small" style="width:140px" class="el-input"></el-input>  
            &nbsp; 物料:<el-input v-model="workOrder.materialNumberId.materialNumber" placeholder="请输入该工单生产物料编号" size="small" style="width:140px" class="el-input" @blur="ma"></el-input> 
            &nbsp; 数量:<el-input v-model="workOrder.num" placeholder="请输入工单生产数量" size="small" style="width:140px" class="el-input" ></el-input> 
            &nbsp;开始日期:<input type="datetime-local" step="01" name="startTime" id="startTime"
                v-model="workOrder.startdate">
            &nbsp;预计结束日期:<input type="datetime-local" step="01" name="endTime" id="endTime"
                v-model="workOrder.overdate">
            &nbsp;
            &nbsp;状态:<el-select v-model="workOrder.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>  
  <el-button type="primary" size="medium" @click="add()">添加</el-button>
  <el-button type="primary" size="medium" @click="del()">清空</el-button>
        </div>      
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            input: '',
                workOrder: {
                    projectId:{
                        id:"2",
                        no:""
                    },
                    materialNumberId:{
                        id:"",
                        materialNumber:""
                    },
                    num:"",
                    startdate:"",
                    overdate:"",
                    state:""
                },
           
            options: [{
          value: '未分配',
          label: '未分配'
        }, {
          value: '已分配',
          label: '已分配'
        }, {
          value: '已完成',
          label: '已完成'
        
        }]

        }
    },
    created: function () {

    },
    methods: {
        del(){
            this.workOrder.projectId.id="";
            this.workOrder.projectId.no="";
               this.workOrder.materialNumberId.id="";
               this.workOrder.materialNumberId.materialNumber="";
               this.workOrder.num="";
               this.workOrder.startdate="";
               this.workOrder.overdate="";
               this.workOrder.state="";
        },
        add(){
            this.$http.post("/production/woc/add", this.workOrder).then(r => {
            if (r.data.code == "200") {
               this.workOrder.projectId.id="";
               this.workOrder.projectId.no="";
               this.workOrder.materialNumberId.id="";
               this.workOrder.materialNumberId.materialNumber="";
               this.workOrder.num="";
               this.workOrder.startdate="";
               this.workOrder.overdate="";
               this.workOrder.state="";
               alert("添加成功")
            } else if (r.data.code == "701") {
                alert("登录已过期,请重新登录");
            } else if (r.data.code == "402") {
                alert("权限不足");
            } else {
                alert(r.data.msg);
            }
        })
        },
        ma(){
            this.$http.post("procurement/material/query",{
                material:{
                    materialNumber:this.workOrder.materialNumberId.materialNumber
                },
                currPage:1,
                pageSize:1
            }).then(r=>{
                console.log(r.data.data.data)
                if(r.data.code==200){
this.workOrder.materialNumberId.id=r.data.data.data[0].id
                }
            })
        },
       
        tableSel:function(val){
            console.log(val.id)
        }
    }
}

</script>

<style >
[class*='el-icon-']:before {
    font-family: element-icons !important;
}
[class*='el-input-']:before {
    size: 20px;
}
</style>